<template>
  <v-app :dark="dark">
    <!-- 左侧导航条 -->
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
    >
      <v-toolbar flat class="transparent">
        <v-list class="pa-0">
          <v-list-tile>
              <div class="album-img">
                <v-upload v-model="userInfo.avator" :isAudio="false" :pic-width="50" :pic-height="50"
                          needSignature url="/signature?type=image">
                </v-upload>
              </div>
            <v-list-tile-content>
              <v-list-tile-title>
                <span class="title_u">
                  {{userInfo.username}}
                </span>
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-toolbar>
      <v-divider/>
      <!-- 左侧菜单 -->
      <v-list class="pt-0" dense>
        <v-list-group
          v-model="item.active"
          v-for="item in items"
          :key="item.title"
          :prepend-icon="item.action"
          no-action
        >
          <!--一级菜单 -->
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.name }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <!-- 二级菜单 -->
          <v-list-tile v-for="subItem in item.children" :key="subItem.name" :to="item.url + subItem.url">
            <v-list-tile-content>
              <v-list-tile-title>{{ subItem.name }}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <!-- 顶部工具条 -->
    <v-toolbar
      app
      dark
      :color="dark ? 'secondary' : 'primary'"
    >
      <!-- 隐藏左侧菜单的按钮-->
      <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
      <!-- 收起左侧菜单的按钮-->
      <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
      <!-- 切换黑暗主题 -->
      <v-flex xs1>
        <v-switch
          :label="dark ? '暗黑' : '明亮'"
          v-model="dark"
          color="dark"
          hide-details
        />
      </v-flex>
      <!-- 顶部导航标题 -->
      <v-flex xs3></v-flex>
      <v-toolbar-title v-text="title"/>
      <v-spacer/>

        <div class="avatorDiv">
          <v-menu
                  bottom
                  origin="center center"
                  transition="scale-transition"
          >
            <template v-slot:activator="{ on }">
              <v-label
                      v-on="on"
              >
                <!--头像-->
                <div>
                  <v-avatar>
                    <v-img
                            :src="userInfo.avator"
                            aspect-ratio="1"
                            class="grey lighten-2"
                    >
                      <template v-slot:placeholder>
                        <v-layout
                                fill-height
                                align-center
                                justify-center
                                ma-0
                        >
                          <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                        </v-layout>
                      </template>
                    </v-img>
                  </v-avatar>
                </div>
              </v-label>
            </template>
            <v-card>
              <v-list>
                <v-list-tile avatar>
                  <v-list-tile-avatar>
                    <v-avatar>
                      <v-img
                              :src="userInfo.avator"
                              aspect-ratio="1"
                              class="grey lighten-2"
                      >
                        <template v-slot:placeholder>
                          <v-layout
                                  fill-height
                                  align-center
                                  justify-center
                                  ma-0
                          >
                            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                          </v-layout>
                        </template>
                      </v-img>
                    </v-avatar>
                  </v-list-tile-avatar>

                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{userInfo.username}}
                    </v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
              <v-divider></v-divider>
              <v-list>
                <v-list-tile  @click="logout()" >
                  <v-list-tile-title>
                    <svg-icon icon-class="tuichu" size="22"></svg-icon>
                    退出
                  </v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-card>
          </v-menu>
        </div>
    </v-toolbar>
    <!--中间内容主体-->
    <v-content>
      <v-breadcrumbs :items="breads" divider=">">
      </v-breadcrumbs>
      <div>
        <!--定义一个路由锚点，Layout的子组件内容将在这里展示-->
        <router-view/>
      </div>
    </v-content>
  </v-app>
</template>

<script>
  // import menus from "../config/menu";

  export default {
    data() {
      return {
        dark: false,// 是否暗黑主题
        drawer: true,// 左侧导航是否隐藏
        miniVariant: false,// 左侧导航是否收起
        title: 'LC音乐后台管理',// 顶部导航条名称,
        menuMap: {
            text: '',
            href: '',
        },
        menus: [],
        userInfo: {}
      }
    },
    computed: {

      items() {
        return this.menus;
      },
      item1() {
        const arr = this.$route.path.split("/");
        return this.menuMap[arr[1]].name;
      },
      item2() {
        const arr = this.$route.path.split("/");
        return this.menuMap[arr[1]][arr[2]];
      },
      breads(){
        const arr = this.$route.path.split("/");
        return [this.menuMap["/" + arr[1]], this.menuMap[this.$route.path]];
      }
    },
    name: 'App',
    watch: {},
    created() {
      this.userInfo = this.$route.params.userInfo
        this.getUserInfo()
    },
    methods: {
      logout() {
        this.$http.post("/logout").then(resp=>{
          this.$message.success("退出登录成功！")
          this.$router.push("/")
        }).catch(()=>{
          this.$router.push("/")
        })
      },
      getUserInfo () {
        // this.userInfo = this.$route.params.userInfo
        this.$http.get("/api/VerifySysUser").then(resp=>{
          this.userInfo = resp.data.userInfo
          this.menus = resp.data.menus
          this.menus.forEach(({url:p1, name:t1, children}) => {
                this.menuMap[p1] = {text:t1, href: p1, disable: false};
                children.forEach(({name:t2, url: p2}) => {
                    this.menuMap[p1 + p2] = {text:t2, href: p1 + p2, disable: false};
                })
            })
        })
      },
    }
  }
</script>

<style scoped>
  .box {
    width: 90%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }

  .title_u {
    font-size: 1.3em;
    display: inline-block;
    margin-left: 30px;
  }
</style>
